@import "./../../../assets/scss/index.scss";

:host{width: 100%;height: 100%;display: block;position: fixed;top:0;right:0;left:0;bottom: 0;background: white;z-index: 10;overflow-y: scroll;}

$title-font-size:26px;
$content-font-size:20px;

.title{font-size: pxTorem($title-font-size);}
.content{font-size: pxTorem($content-font-size)}
.mt{margin-top: pxTorem(30px);}
.w{width: pxTorem(380px);}
.back{font-size: pxTorem(45px);margin-left: pxTorem(35px);}
//initialization
header{
    background:  #e6e6e6;color:#333333;position: relative;
    h1{font-size: pxTorem(34px);line-height: pxTorem(88px);width: 60%;
    display: inline-block;}
    .nav{
        display: inline-block;
        i{
            font-style:normal;text-align: center;height: 32px;margin: 0 6px; border-radius: 100%; background: $mpj-primary;width: 12px;height: 12px;display: inline-block;
            &.active{height: 32px;background: $mpj-primary;width: 32px;line-height: 32px;font-size: pxTorem(24px);color: white;}
        }
    }
}
.padding{padding-left: pxTorem(160px);}
.margin{margin-left: pxTorem(160px);margin-right: pxTorem(160px);}
button{color: white; height: pxTorem(70px);font-size: pxTorem(26px);background: $mpj-primary;width: 360px;}
input{color: #333333;font-size: pxTorem(24px);line-height: pxTorem(50px);display: block; color: black; width: 680px;border: none;border-bottom: 1px #cccccc solid;margin-top: 5px;}
input::-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {background-color: white !important;}
.instruction{
    margin-top: 0px;
    dt{font-size:pxTorem(26px);}
    dd{font-size: pxTorem(20px);color: #333333;padding: 5px 0;}
}

//进度条
md-progress-bar{
    width: pxTorem(680px);
}
 
//welcome
.welcome-container{
    margin-left: pxTorem(160px);
    header{
        margin-top: 100px;color:$mpj-primary;background:white;
        hr{color:$mpj-primary;}
        h1{font-size: pxTorem(64px);color: $mpj-primary;}
        p{font-size: pxTorem(28px);color: #333333;margin-top: 20px;}
    }
    hr{border: 1px solid $mpj-primary;width: 680px;}
    button{margin-top: 100px;}
}

//connnectLDC
.connectLDc-contaiiner{
    dl {
        margin-top: 40px;
    }
    dt{margin-bottom: pxTorem(22px);}
    .status{
        margin-top: pxTorem(30px);
        .input{
            overflow: hidden;
            input{display: block;width: 100%;}
            .forward{color: white;background: $mpj-primary;border-radius: 100%;margin: -42px; font-size: pxTorem(40px);}
            button{
                margin-top: 20px;
                width: 48%;
                &:first-child{
                    float: left;
                }
                &:last-child{
                    float: right
                }
            }
            .auto_search{
                color: #0068d2;
                background: #fff;
                border: 1px solid #0068d2;
            }
        }
        .checking{
            &>div{font-size: $title-font-size;}
            input{color: #999999;font-size: pxTorem(28px);}
            button{margin-top: 20px;}
        }
        .failed{
            &>div{font-size: $title-font-size;}
            .warn{color: $mpj-warning;font-size: pxTorem(28px);}
            button{margin-top: 20px;}
        }
    }


}

//checkEnv
.checkenv-container{
    .store{
        margin-top: pxTorem(50px);
        .info{color:#333333;font-size: pxTorem(30px);}
        .store-info{
            margin-top: pxTorem(20px);padding-bottom: pxTorem(20px);width:pxTorem(640px);border-bottom: 1px solid #999999;
            img{height: 64px;width: 64px;margin-right: pxTorem(20px);}
            p{color:#333333;font-size: 24px;}
        }
    }
    .status{
        margin-top: 155px;
        &>div{font-size:pxTorem(30px);color: #333333;}
        .failed{
            .svr-item{
                .title{
                    margin-bottom: 26px;
                    i{font-size: pxTorem(24px);color: $mpj-error;}
                }
            }
        }
    }
    .button{margin-top: 50px;}
}

//remoteLogin
.remotelogin-container {
    .tip{
        margin-top: 70px;
        .content{margin-top: 10px;}
    }
    .form{
        margin-top: 30px;
        md-input{width: 680px;font-size: pxTorem(30px);padding-top: 60px;}
        button{margin-top: 60px;}
    }
}

//selectstore
.selectstore-container{
    .stores{
        dt{font-size: pxTorem(30px);color: #333333;}
        dd{
            height: pxTorem(88px);border-bottom: 1px solid #999999;
            img{height: 64px;width: 64px;margin-right: 20px;}
        }
    }
}

//binddevice-container
.binddevice-container{
    .terminal{
        h3{padding-top: pxTorem(30px);}input{margin-top: 2px;}
        .content{width: 680px;color: #999999;}
    }
    .solution{
        margin-top: pxTorem(30px);width:680px;
        .description{font-size: pxTorem($content-font-size);color: #333333;margin-top: 10px;}
        select{padding: 0 10px;width: 680px; font-size: pxTorem(24px);width: 100%;height: 50px;background: #e6e6e6;margin-top: pxTorem(22px);border: none;color: #333333;width: pxTorem(680px);}
        .info{color: #999999;}
   }
   button{margin-top: 20px;}
}


//checkOldEnv
.checkoldenv-container{
    font-size: 30px;width: 100%;height: 100%;color:white;
    .failed{
         top:76%;text-align:center;width: 1000px;
        .title{font-size: pxTorem(32px);color: #ffffff;}
        .content{font-size: pxTorem(24px);color: #e6ffff;margin-top: 20px;}
        button{margin-top: 50px; border: 1px solid white;width: 240px;height: 72px;font-size: pxTorem(28px);color: #ffffff;background: $mpj-primary;}
    }
    .container{
        background:$mpj-primary;
        position: absolute;
        top:0;left:0;bottom:0;right:0;
    }
}

//checkMode
.check_mode_container{
    .check_box{
        margin: pxTorem(40px);
        padding: pxTorem(20px);
        background: #e6e6e6;
    }
    .desc{
        padding-top: pxTorem(20px);
    }
}